<template>
  <div class="con">
    <!-- 放置内容区 -->
    <div class="contbox6_10" v-if="true">
      <p class="titlelist6_10">
        商户管理
        <span style="color: #999">&nbsp;&nbsp;/&nbsp;&nbsp;</span>商户列表
      </p>
      <div class="content">
        <div class="sousuojg6_10">
          <el-form ref="listQuery" :model="listQuery" label-width="100px">
            <el-form-item label="归属OEM">
              <el-input
                placeholder="请选择归属OEM"
                v-model="listQuery.oemName"
              ></el-input>
            </el-form-item>
            <el-form-item label="归属机构">
              <el-input
                readonly
                placeholder="请选择归属机构"
                @focus="selectInstitution"
                v-model="officeName"
              ></el-input>
            </el-form-item>
            <el-form-item label="机构名称">
              <el-input
                placeholder="请输入机构名称"
                v-model="listQuery.officeName"
              ></el-input>
            </el-form-item>
            <el-form-item label="机构ID">
              <el-input
                placeholder="请输入机构ID"
                v-model="listQuery.officeUid"
              ></el-input>
            </el-form-item>
            <el-form-item label="品牌名称">
              <el-input
                placeholder="请输入品牌名称"
                v-model="listQuery.channelName"
              ></el-input>
            </el-form-item>
            <el-form-item label="商户名称">
              <el-input
                placeholder="请输入商户名称"
                v-model="listQuery.merName"
              ></el-input>
            </el-form-item>
            <el-form-item label="商户手机号">
              <el-input
                placeholder="请输入商户手机号"
                v-model="listQuery.mobile"
              ></el-input>
            </el-form-item>
            <el-form-item label="终端类型">
              <el-select
                v-model="listQuery.products"
                placeholder="请输入终端类型"
              >
                <el-option label="POS" value="POS"></el-option>
                <el-option label="QPOS" value="QPOS"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="商品序列号">
              <el-input
                placeholder="请输入商品序列号"
                v-model="listQuery.productCode"
              ></el-input>
            </el-form-item>
            <el-form-item label="结算方式">
              <el-select v-model="listQuery.settleType" placeholder="请选择结算方式">
                <el-option label="T1" value="T1"></el-option>
                <el-option label="TS" value="TS"></el-option>
                <el-option label="D1" value="D1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="入网时间">
              <el-date-picker
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="开始日期"
                v-model="listQuery.startDate"
                style="width: 100%"
              ></el-date-picker>
              <div class="times">-</div>
              <el-date-picker
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="结束日期"
                v-model="listQuery.endDate"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-form>
        </div>
        <div class="buttons">
          <el-button
            v-if="isAuth('businessManageSearch')"
            type="primary"
            @click="handleSelectLists"
            >搜索</el-button
          >
          <el-button
            v-if="isAuth('businessManageReset')"
            @click="resetTheSearch"
            >重置</el-button
          >
          <el-button
            @click="exportFiles"
            class="butt"
            style="margin-left: 40px"
            type="primary"
            v-if="total > 0"
          >
            批量导出
          </el-button>
        </div>
        <el-table
          :data="list"
          tooltip-effect="dark"
          :header-cell-style="{ background: '#F9FAFC', color: '#222' }"
          stripe
          border
          :row-style="{ height: '0px' }"
          :cell-style="{ padding: '0px' }"
          ref="multipleTable"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column
            show-overflow-tooltip
            min-width="150"
            label="归属OEM"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.oemName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            min-width="150"
            label="归属机构"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.toOfficeName }}</span>
            </template>
          </el-table-column>
           <el-table-column show-overflow-tooltip min-width="160" label="机构ID">
            <template slot-scope="scope">
              <span>{{ scope.row.officeUid }}</span>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            min-width="150"
            label="机构名称"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.officeName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            min-width="150"
            label="通道商户编号"
          >
            <template slot-scope="scope"> {{ scope.row.merCode }} </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            min-width="100"
            label="商户名称"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.merName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            min-width="130"
            label="商户手机号"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.mobile }}</span>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            min-width="155"
            label="入网时间"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.createDate }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column show-overflow-tooltip min-width="155" label="入驻时间">
            <template slot-scope="scope">
              <span>{{ scope.row.createDate }}</span>
            </template>
          </el-table-column> -->
          <!-- <el-table-column show-overflow-tooltip min-width="150" label="归属机构">
            <template slot-scope="scope">
              <span>{{ scope.row.parentName }}</span>
            </template>
          </el-table-column> -->
          <el-table-column show-overflow-tooltip min-width="100" label="品牌">
            <template slot-scope="scope">
              <span>{{ scope.row.channelName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            min-width="100"
            label="终端类型"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.products }}</span>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            min-width="150"
            label="商品序列号"
          >
            <template slot-scope="scope">
              <span>
                {{ scope.row.productCode }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            min-width="100"
            label="结算方式"
          >
            <template slot-scope="scope">
              <span>
                {{ scope.row.settleType }}
              </span>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip min-width="100" label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="cat(scope.row)">查看</el-button>
            </template>
          </el-table-column>
          <!-- <el-table-column show-overflow-tooltip min-width="150" label="机具SN">
            <template slot-scope="scope">
              <span>{{ scope.row.productCode }}</span>
            </template>
          </el-table-column> -->
        </el-table>
        <div style="font-size: 16px; margin-top: 30px">
          <el-pagination
            style="text-align: right"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="listQuery.page"
            :page-sizes="[20, 50, 100]"
            :page-size="listQuery.number"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </div>
    </div>
    <Tree :showType="showType" @func="transmit" />
  </div>
</template>

<script>
import Tree from "../tree/index";
import https from "../../plugins/https.js";
// 批量导出
import { exportFile } from "../../plugins/expord";
export default {
  name: "businessManage",
  data() {
    return {
      showType: false,
      officeName: "",
      list: null,
      total: null,
      listLoading: true,
      checkedAll: false,
      listQuery: {
        oemUid:
          localStorage.getItem("jurisdiction") != 2
            ? localStorage.getItem("uid")
            : undefined, //OEMid
        officeUid: undefined, //机构ID
        toOfficeName: "", //归属机构
        toOfficeUid:"",
        oemName: "", //归属OEM
        channelName: "", //品牌名称
        productCode: "", //商品序列号
        officeName: undefined, //	机构名称
        merName: undefined, //	商户名称
        mobile: "", //	手机号
        status: undefined, //	状态
        startDate: undefined, //	开始时间
        endDate: undefined, //	结束时间
        products:"",
        settleType:"",
        page: 1, //第几页
        number: 20, //每页几条
      },
      multipleSelection: [], //选中的数组
      selectTime: [],
      sign: localStorage.getItem("jurisdiction") == 2, //最高权限看到的true
    };
  },
  components: {
    Tree,
  },
  created() {
    let that = this;
    that.handleSelectList();
  },

  methods: {
    // 查看详情
    cat(val) {
      console.log(val)
      this.$router.push({
        name: "catBusiness",
        query:{
          uid:val.uid,
          merType:val.merType
        }
      });
    },
    //这里开始
    transmit(data) {
      console.log(data.uid);
      //归属机构的uid
      this.listQuery.toOfficeUid = data.uid;
      // console.log(this.form.officeUid)
      //归属机构名字
      this.officeName = data.name;
    },
    //设置取消的
    determine() {
      // alert("执行")
      this.showType = false;
    },
    selectInstitution() {
      this.showType = true;
    },
    //这里结束

    /**
     * @Author： Zhu Liang Fu
     * @Date：2020/7/15
     * @annotation: 全选
     **/
    selAll() {
      if (this.checkedAll) {
        this.list.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    /**
     * @Author： Zhu Liang Fu
     * @Date： 2020/6/10 16:41
     * @annotation： 界面集合获取数据
     **/
    handleSelectList() {
      let that = this;
      that.listLoading = true;
      https.merInfoList(that.listQuery).then((res) => {
        if (res.data.code == "0000") {
          that.list = res.data.data;
          that.total = res.data.total;
          that.listLoading = false;
        } else {
          that.listLoading = false;
          layer.open({
            content: res.data.msg,
            skin: "msg",
            time: 2, //1秒后自动关闭
          });
        }
      });
    },
    /**
     * @Author： Zhu Liang Fu
     * @Date： 2020/6/10 17:57
     * @annotation： 分页
     **/
    handleSizeChange(val) {
      let that = this;
      that.listQuery.number = val;
      that.listQuery.page = 1;
      that.handleSelectList();
    },
    handleSelectLists() {
      let that = this;
      that.listQuery.page = 1;
      that.handleSelectList();
    },
    /**
     * @Author： Zhu Liang Fu
     * @Date： 2020/6/10 17:57
     * @annotation： 分页
     **/
    handleCurrentChange(val) {
      let that = this;
      that.listQuery.page = val;
      that.handleSelectList();
    },
    /**
     * @author: Zhu Liangfu
     * @Description: 导出模板
     * @date:2020/6/11   20:44
     */
    exportFiles() {
      let that = this;
      exportFile(
        "/api/merchant/merInfo/excel/export",
        that.listQuery,
        "商户列表"
      );
    },

    /**
     * @Author： Zhu Liang Fu
     * @Date： 2020/6/10 17:50
     * @annotation： 重置查询条件
     **/
    resetTheSearch() {
      let that = this;
      this.officeName = "";

      that.listQuery = {
        oemUid:
          localStorage.getItem("jurisdiction") != 2
            ? localStorage.getItem("uid")
            : undefined, //OEMid
        officeUid: undefined, //机构ID
        toOfficeName: "", //归属机构
        toOfficeUid:"",
        oemName: "", //归属OEM
        channelName: "", //品牌名称
        productCode: "", //商品序列号
        officeName: undefined, //	机构名称
        merName: undefined, //	商户名称
        mobile: "", //	手机号
        status: undefined, //	状态
        settleType:"",
        products:"",//终端类型
        startDate: undefined, //	开始时间
        endDate: undefined, //	结束时间
        page: 1, //第几页
        number: 20, //每页几条
      };
      that.selectTime = [];
      that.handleSelectList();
    },
  },
};
</script>

<style scoped>
.con {
  position: relative;
}
/* 单独样式 */
.contbox6_10 {
  width: 100%;
  /* margin-left: 2%; */
  /* height: 87.5vh; */
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}

.fileList {
  display: inline-block;
  border-style: solid dotted dashed double;
  padding: 8px 8px 8px 8px;
  text-align: center;
}
.times {
  width: 20px;
  display: inline-block;
  text-align: center;
}
.buttons > .el-button {
  width: 100px;
  padding: 7px;
  height: 32px;
}
</style>
